<script type="text/javascript" src="/room3/js/jquery-1.7.1.min.js"></script>
<style>
	.roomStyle {
		display: inline;
		cursor: pointer;
		float: left;
		TEXT-ALIGN: center;
		font-size: 12px;
		position: relative;
		border-style: solid;
		border-width: 1px;
		margin: 1px;
	}
	
	.roomType {
		MARGIN-RIGHT: auto;
		MARGIN-LEFT: auto;
	}
</style>
<link rel="stylesheet" href="css/menu/qqwebmain.css" />
<canvas id='c' style="width: 500px; height: 100%; "/>
<div id="leftBar" style="width: 73px; height: 100%; ">
	<div id="dockContainer" class="dock_container dock_pos_left" style="z-index: 10; ">
		<div class="dock_middle">
			<div id="dockItemList" class="dock_item_list" customacceptdrop="1">
				<div appid="50" fileid="50" type="app" id="alloy_icon_app_50_3" uid="app_50" class="appButton not_deleteable" title="QQ">
					<div class="appButton_appIcon " id="alloy_icon_app_50_3_icon_div" style=""><img id="alloy_icon_app_50_3_img" class="appButton_appIconImg" src="http://0.web.qstatic.com/webqqpic/pubapps/0/50/images/big.png" alt="QQ">
					</div>
				</div>
				<div appid="16" fileid="16" type="app" id="alloy_icon_app_16_4" uid="app_16" class="appButton " title="QQ空间">
					<div class="appButton_appIcon " id="alloy_icon_app_16_4_icon_div" style=""><img id="alloy_icon_app_16_4_img" class="appButton_appIconImg" src="http://6.web.qstatic.com/webqqpic/pubapps/0/16/images/big.png" alt="QQ空间">
					</div>
					<div class="appButton_appName">
						<div id="alloy_icon_app_16_4_name" class="appButton_appName_inner">
							QQ空间
						</div><div class="appButton_appName_inner_right"></div>
					</div>
					<div class="appButton_delete" id="alloy_icon_app_16_4_delete" title="卸载应用"></div>
				</div>
				<div appid="17" fileid="17" type="app" id="alloy_icon_app_17_5" uid="app_17" class="appButton " title="QQ邮箱">
					<div class="appButton_appIcon " id="alloy_icon_app_17_5_icon_div" style=""><img id="alloy_icon_app_17_5_img" class="appButton_appIconImg" src="http://7.web.qstatic.com/webqqpic/pubapps/0/17/images/big.png" alt="QQ邮箱">
					</div>
				</div>
				<div appid="2" fileid="2" type="app" id="alloy_icon_app_2_6" uid="app_2" class="appButton " title="腾讯微博">
					<div class="appButton_appIcon " id="alloy_icon_app_2_6_icon_div" style=""><img id="alloy_icon_app_2_6_img" class="appButton_appIconImg" src="http://2.web.qstatic.com/webqqpic/pubapps/0/2/images/big.png" alt="腾讯微博">
					</div>
					<div class="appButton_appName">
						<div id="alloy_icon_app_2_6_name" class="appButton_appName_inner">
							腾讯微博
						</div><div class="appButton_appName_inner_right"></div>
					</div>
					<div class="appButton_delete" id="alloy_icon_app_2_6_delete" title="卸载应用"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<div style="width: 233px; height: 90%; position: absolute;top: 0px;left: 100px;">
	<div id='roomStyleList' style="width: 200px; height: 60%; ">
			<div class="roomStyle ">
				<canvas id="room1" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room2" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
			<div class="roomStyle ">
				<canvas id="room3" style="float:left" width="200px" height="100px"></canvas>
				<div class='roomType'>
					test
				</div>
			</div>
		
	</div>

</div>
<script type="text/javascript">
	$(function() {
		$('canvas').css('cursor',"url('images/mouse/normal.png')");
		var listshow = false;
		$('#arraw_up').click(function() {
			// $("#roomStyleList").slideToggle("slow",function(){
			// $('#arraw_up').aniamte({});
			// });
			if($("#roomStyleList").css('display') != 'none')
				$("#roomStyleList").animate({
					width : "0px"
				}, function() {
					$("#roomStyleList").css({
						display : "none"
					});
				});
			else {
				$("#roomStyleList").css({
					display : "block"
				});
				$("#roomStyleList").animate({
					width : "201px"
				}, function() {
					// $('#arraw_up').css({float:"right"});
				});
			}

		});
		$('#leftBar').click(function() {
			$("#dockItemList").animate({
				height : 1000
			}, "slow");
		});
		var c1 = document.getElementById("room1");
		var ctxRoom1 = c1.getContext("2d");

		var c2 = document.getElementById("room2");
		var ctxRoom2 = c2.getContext("2d");

		// Set the style properties.
		var image = new Image();
		image.src = "obj/wall/initfloor.jpg";
		image.onload = function() {
			var pp = ctxRoom1.createPattern(image, 'repeat');
			ctxRoom1.fillStyle = pp;
			ctxRoom1.strokeStyle = '#000';
			ctxRoom1.lineWidth = 4;

			ctxRoom1.beginPath();
			ctxRoom1.moveTo(10, 10);
			// give the (x,y) coordinates
			ctxRoom1.lineTo(100, 10);
			ctxRoom1.lineTo(100, 30);
			ctxRoom1.lineTo(150, 30);
			ctxRoom1.lineTo(150, 100);
			ctxRoom1.lineTo(0, 100);
			ctxRoom1.lineTo(0, 30);
			ctxRoom1.lineTo(10, 30);
			ctxRoom1.lineTo(10, 10);
			ctxRoom1.fill();
			ctxRoom1.stroke();
			ctxRoom1.closePath();

			ctxRoom2.fillStyle = pp;
			ctxRoom2.strokeStyle = '#000';
			ctxRoom2.lineWidth = 4;

			ctxRoom2.beginPath();
			ctxRoom2.moveTo(10, 10);
			// give the (x,y) coordinates
			ctxRoom2.lineTo(100, 10);
			ctxRoom2.lineTo(100, 30);
			ctxRoom2.lineTo(150, 30);
			ctxRoom2.lineTo(150, 50);
			ctxRoom2.lineTo(0, 50);
			ctxRoom2.lineTo(0, 30);
			ctxRoom2.lineTo(10, 30);
			ctxRoom2.lineTo(10, 10);
			ctxRoom2.fill();
			ctxRoom2.stroke();
			ctxRoom2.closePath();
		}
	})
</script>